<!--
 * @Author: liaoyu1992 1519778181@qq.com
 * @Date: 2022-11-05 10:33:55
 * @LastEditors: liaoyu1992 1519778181@qq.com
 * @LastEditTime: 2022-11-11 22:00:33
 * @FilePath: \kgantt\core\components\gantt\TaskGanttContent.vue
 * @Description: 
-->
<template>
  <g class="kgantt-content">
    <g class="kgantt-arrows" :fill="arrowColor" :stroke="arrowColor">
      <Arrow
        v-for="item in taskList"
        :key="item.key"
        :taskFrom="item.taskFrom"
        :taskTo="item.taskTo"
        :rowHeight="item.rowHeight"
        :taskHeight="item.taskHeight"
        :arrowIndent="item.arrowIndent"
        :rtl="item.rtl"
      />
    </g>
    <g class="kgantt-bar" :font-family="fontFamily" :font-size="fontSize">
      <TaskItem
        v-for="task in tasks"
        :key="task.id"
        :task="task"
        :arrowIndent="arrowIndent"
        :taskHeight="taskHeight"
        :is-progress-changeable="!task.isDisabled"
        :is-date-changeable="!task.isDisabled"
        :is-delete="!task.isDisabled"
        :is-selected="!!selectedTask && task.id === selectedTask.id"
        :rtl="rtl"
        @on-event-start="handleBarEventStart"
      />
    </g>
  </g>
</template>
<script lang="ts" setup>
import { onMounted, PropType, ref, watch } from "vue";
import { BarTask } from "../../types/barTask";
import {
  GanttContentMoveAction,
  GanttEvent,
} from "../../types/ganttTaskActions";
import Arrow from "../other/Arrow.vue";
import TaskItem from "../taskitem/TaskItem.vue";
const props = defineProps({
  tasks: {
    type: Array as PropType<BarTask[]>,
    default: () => [],
  },
  dates: {
    type: Array as PropType<Date[]>,
    default: () => [],
  },
  ganttEvent: {
    type: Object as PropType<GanttEvent>,
    default: {},
  },
  selectedTask: {
    type: Object as PropType<BarTask>,
    default: {},
  },
  rowHeight: {
    type: Number,
    default: 0,
  },
  columnWidth: {
    type: Number,
    default: 0,
  },
  timeStep: {
    type: Number,
    default: 0,
  },
  svgWidth: {
    type: Number,
    default: 0,
  },
  taskHeight: {
    type: Number,
    default: 0,
  },
  arrowColor: {
    type: String,
    default: "",
  },
  arrowIndent: {
    type: Number,
    default: 0,
  },
  fontSize: {
    type: String,
    default: "",
  },
  fontFamily: {
    type: String,
    default: "",
  },
  rtl: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["handleBarEventStart"]);
const taskList = ref<any>([]);
const handleBarEventStart = (
  action: GanttContentMoveAction,
  selectedTask: BarTask,
  event?: MouseEvent | KeyboardEvent
) => {
  emits("handleBarEventStart", action, selectedTask, event);
};
const updateTasks = () => {
  let tmpTasks: Object[] = [];
  props.tasks.forEach((task: BarTask) => {
    task.barChildren.forEach((child: BarTask) => {
      tmpTasks.push({
        key: `Arrow from ${task.id} to ${props.tasks[child.index].id}`,
        taskFrom: task,
        taskTo: props.tasks[child.index],
        rowHeight: props.rowHeight,
        taskHeight: props.taskHeight,
        arrowIndent: props.arrowIndent,
        rtl: props.rtl,
      });
    });
  });
  taskList.value = tmpTasks;
};
watch(
  () => props.tasks,
  () => {
    updateTasks();
  }
);
onMounted(() => {
  updateTasks();
});
</script>